<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--<audio></audio>-->
		
		<div id="app">
			<p>{{volume}}</p>
			
			<!--父组件通过v-on监听子组件的自定义事件-->
			<v-ctrl v-on:click="changeVolume" :volume="volume"></v-ctrl>
			
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/html" id="v-ctrl">
		<div>
			<button v-on:click="vchange(-10)">-</button>
			<button v-on:click="vchange(10)">+</button>
		</div>
	</script>
	<script>
	
		Vue.component("v-ctrl",{
			props:["volume"],
			data:function(){
				return {
					ctrlVolume:this.volume
				}
			},
			template:"#v-ctrl",
			methods:{
				vchange:function(c){
					this.ctrlVolume+=c;
					//$emit,触发一个自定义事件，自定义事件的触发
					//是自下而上的.
					this.$emit("click",this.ctrlVolume);
				}
			}
		});
	
		var app = new Vue({
			el:"#app",
			data:{
				volume:50
			},
			methods:{
				changeVolume:function(vol){
					console.log(123);
					this.volume = vol;
				}
			}
		});
	</script>
</html>




